<script setup lang="ts">
</script>
<template>
<div class="main">
    <div class="div_table">
<table>
    <thead>
        <tr>
            <th>班级</th>
            <th>姓名</th>
            <th>原因</th>
            <th>人数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>21编程班</td>
            <td>张三</td>
            <td>生病</td>
            <td>1/3</td>
        </tr>
        <tr>
            <td>21编程班</td>
            <td>李四</td>
            <td>家里有事</td>
            <td>2/3</td>
        </tr>
        <tr>
            <td>21编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>22编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>1/3</td>
        </tr>
         <tr>
            <td>22编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>2/3</td>
        </tr>
         <tr>
            <td>22编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
         <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>1/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>2/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>24编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>1/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>2/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        <tr>
            <td>23编程班</td>
            <td>王五</td>
            <td>旷课</td>
            <td>3/3</td>
        </tr>
        
    </tbody>
</table>
</div>
</div>
</template>
<style scoped>
.main{
    background-image: url(../../images/kuang.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* overflow-y: scroll;滚轮 */
}
table{
    width: 80%;
    margin: 1vh 2.3vw;
    color: white;
    font-size: 16px;
    /* 滚轮 overflow-y: auto;
    overflow-x:#42fff4 ; */
}
table,th,td{
    border: 1px solid #42fff4;
    border-collapse: collapse;
}

.div_table{
    width: 80%;
    height: 75%;
    overflow-y: auto;
    margin: 5.5vh 2vw;

    &::-webkit-scrollbar{
        width: 8px;
    }

    &::-webkit-scrollbar-track{
        background: #42fff4;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb{
        background: #42fff4;
        border-radius: 10px;
    }
}

</style>